import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class SharePage extends StatelessWidget {
  const SharePage({super.key});

  @override
  Widget build(BuildContext context) {
    var mediaQuery = MediaQuery.of(context); // 获取屏幕尺寸信息
    var topPadding = mediaQuery.padding.top; // 获取刘海的顶部安全区域
    var mediaWidth = mediaQuery.size.width; // 获取屏幕宽度
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.fromLTRB(0, topPadding, 0, 0), //设置顶部安全距离
        child: Stack(
          children: [
            Column(
              children: [
                Expanded(
                  child: Container(
                      width: mediaWidth, //屏幕宽度
                      margin: const EdgeInsets.fromLTRB(20, 60, 20, 20), //左上右下
                      decoration: BoxDecoration(
                        //圆形边框
                        borderRadius: BorderRadius.circular(60),
                        //盒子阴影
                        boxShadow: [
                          BoxShadow(
                            color: Colors.black.withOpacity(0.5), // 阴影颜色及透明度
                            blurRadius: 20, // 模糊半径
                            offset: const Offset(5, 5), // 阴影偏移量
                          ),
                        ],

                        //容器中的背景渐变色
                        gradient: const LinearGradient(
                          begin: Alignment.topLeft,
                          end: Alignment.bottomRight,
                          colors: [
                            Color(0xffbe7634), // 渐变色起始颜色
                            Color(0xfff1e3d6),
                            Color(0xffffffff), // 渐变色结束颜色
                          ],
                        ),
                      ),
                      
                      child: 
                      SingleChildScrollView(
                        child: Column(
                          children: [
                            Container(
                              width: mediaWidth - 20,
                              height: 60,
                              //颜色
                              // decoration: BoxDecoration(color: Colors.red),
                              child: const Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  Padding(
                                    padding: EdgeInsets.fromLTRB(30, 0, 0, 0),
                                    child: backHend(),
                                  ),
                                  Padding(
                                    padding: EdgeInsets.fromLTRB(0, 0, 30, 0),
                                    child: PublishButton(),
                                  ),
                                ],
                              ),
                            ),
                            Container(
                              width: mediaWidth - 20,
                              height: 180,
                              //颜色
                              // decoration: BoxDecoration(color: Color(0xFFF44336)),
                              child: Column(
                                children: [
                                  Container(
                                    alignment: AlignmentDirectional.center,
                                    width: mediaWidth - 20,
                                    height: 40,
                                    // decoration:
                                    //     BoxDecoration(color: Color(0xFFF44336)),
                                    padding: EdgeInsets.fromLTRB(20, 0, 20, 0),
                                    child: const Text(
                                      '寻找热爱岭南文化的志愿者',
                                      style: TextStyle(
                                          fontSize: 27, fontFamily: 'KaiTi'),
                                    ),
                                  ),
                                  Container(
                                    width: mediaWidth - 20,
                                    height: 120,
                                    // decoration:
                                    //     BoxDecoration(color: Colors.yellow),
                                    child: ListView(
                                        padding:
                                            EdgeInsets.fromLTRB(50, 10, 50, 0),
                                        children: const [
                                          Text(
                                            '寻找伙伴一起去参加儿童节期间的志愿活动，到岭南金融的博物馆做志愿者，寻找伙伴一起去参加儿童节期间的志愿活动，到岭南金融的博物馆做志愿者寻找伙伴一起去参加儿童节期间的志愿活动，到岭南金融的博物馆做志愿者寻找伙伴一起去参加儿童节期间的志愿活动，到岭南金融的博物馆做志愿者寻找伙伴一起去参加儿童节期间的志愿活动，到岭南金融的博物馆做志愿者志愿者负责讲解文物讲述文物历史来源，管理现场干秩序',
                                            style: TextStyle(
                                                fontSize: 15,
                                                fontFamily: 'KaiTi'),
                                          ),
                                        ]),
                                  ),
                                  Container(
                                    alignment: AlignmentDirectional.bottomEnd,
                                    height: 16,
                                    width: mediaWidth - 20,
                                    // decoration:
                                    //     const BoxDecoration(color: Colors.black),
                                    child: const Text("59/10000"),
                                  )
                                ],
                              ),
                            ),
                            Container(
                              alignment: AlignmentDirectional.bottomEnd,
                              height: 16,
                              width: mediaWidth - 20,
                              // decoration:
                              //     const BoxDecoration(color: Colors.black),
                              child: const Text("59/10000"),
                            ),
                            Container(
                              width: mediaWidth - 20,
                              height: 220,
                              padding: EdgeInsets.fromLTRB(20, 5, 20, 0),
                              //颜色
                              // decoration: BoxDecoration(color: Colors.orange),
                              child: Wrap(
                                alignment: WrapAlignment.spaceBetween,
                                spacing: 5, //水平间距   *
                                runSpacing: 10, //垂直间距 *
                                // direction:Axis.vertical,  *
                                children: [
                                  ClipRRect(
                                    borderRadius: BorderRadius.circular(10),
                                    child: Image.network(
                                      "https://www.itying.com/images/flutter/3.png",
                                      fit: BoxFit.cover,
                                      width: 110,
                                      height: 90,
                                    ),
                                  ),
                                  ClipRRect(
                                    borderRadius: BorderRadius.circular(10),
                                    child: Image.network(
                                      "https://www.itying.com/images/flutter/3.png",
                                      fit: BoxFit.cover,
                                      width: 110,
                                      height: 90,
                                    ),
                                  ),
                                  ClipRRect(
                                    borderRadius: BorderRadius.circular(10),
                                    child: Image.network(
                                      "https://www.itying.com/images/flutter/3.png",
                                      fit: BoxFit.cover,
                                      width: 110,
                                      height: 90,
                                    ),
                                  ),
                                  ClipRRect(
                                    borderRadius: BorderRadius.circular(10),
                                    child: Image.network(
                                      "https://www.itying.com/images/flutter/3.png",
                                      fit: BoxFit.cover,
                                      width: 110,
                                      height: 90,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                            Container(
                              width: mediaWidth - 20,
                              height: 38,
                              padding: EdgeInsets.fromLTRB(20, 5, 20, 0),
                              //颜色
                              // decoration: BoxDecoration(color: Colors.red),
                              child: const Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  Row(
                                    children: [
                                      Text("#岭南文化  ",
                                          style: TextStyle(
                                            color: Colors.purple,
                                            fontSize: 15,
                                          )),
                                      Text(
                                        "#志愿者  ",
                                        style: TextStyle(
                                            color: Colors.purple, fontSize: 15),
                                      ),
                                      Text(
                                        "#文化爱好者  ",
                                        style: TextStyle(
                                            color: Colors.purple, fontSize: 15),
                                      )
                                    ],
                                  )
                                ],
                              ),
                            ),
                            Container(
                              width: mediaWidth - 20,
                              height: 120,
                              //颜色
                              // decoration: BoxDecoration(color: Colors.pink),
                              padding: EdgeInsets.fromLTRB(50, 0, 20, 0),
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment
                                    .spaceBetween, // 指定元素在主轴上的对齐方式
                                children: <Widget>[
                                  const Row(
                                    children: <Widget>[
                                      Icon(Icons.emoji_people,
                                          size:
                                              10), // reduce the size of the Icon
                                      Text("心情",
                                          style: TextStyle(
                                              fontSize:
                                                  10)), // reduce the font size of the Text
                                    ],
                                  ),
                                  Row(
                                    children: <Widget>[
                                      Icon(Icons.emoji_people,
                                          size:
                                              10), // reduce the size of the Icon
                                      Text("性别：不限",
                                          style: TextStyle(
                                              fontSize:
                                                  10)), // reduce the font size of the Text
                                    ],
                                  ),
                                  Row(
                                    children: <Widget>[
                                      Icon(Icons.emoji_people,
                                          size:
                                              10), // reduce the size of the Icon
                                      Text("搭子人数：13/20",
                                          style: TextStyle(
                                              fontSize:
                                                  10)), // reduce the font size of the Text
                                    ],
                                  ),
                                  Row(
                                    children: <Widget>[
                                      Icon(Icons.emoji_people,
                                          size:
                                              10), // reduce the size of the Icon
                                      Text("截至日期：5.29",
                                          style: TextStyle(
                                              fontSize:
                                                  10)), // reduce the font size of the Text
                                    ],
                                  ),
                                  Row(
                                    children: <Widget>[
                                      Icon(Icons.emoji_people,
                                          size:
                                              10), // reduce the size of the Icon
                                      Text("活动地址：岭南金融博物馆",
                                          style: TextStyle(
                                              fontSize:
                                                  10)), // reduce the font size of the Text
                                    ],
                                  ),
                                  Row(
                                    children: <Widget>[
                                      Icon(Icons.emoji_people,
                                          size:
                                              10), // reduce the size of the Icon
                                      Text("所有人",
                                          style: TextStyle(
                                              fontSize:
                                                  10)), // reduce the font size of the Text
                                    ],
                                  ),
                                ].toList(),
                              ),
                            ),
                          ],
                        ),
                      )
                      ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

// 发布按钮
class PublishButton extends StatelessWidget {
  const PublishButton({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: const LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [
            Color(0xffffffff), // 渐变色起始颜色
            Color(0xfff1e3d6),
            Color(0xffd5a982), // 渐变色结束颜色
          ],
        ),
        borderRadius: BorderRadius.circular(50.0),
      ),
      child: TextButton(
        onPressed: () {
          print('发布按钮被点击了');
        },
        child: const Text(
          '发布',
          style: TextStyle(
            color: Colors.black, // 这里您可以根据渐变颜色选择适合的文字颜色
            fontSize: 18.0,
            height: 1.2,
            fontFamily: "Courier", // 字体类型
          ),
        ),
      ),
    );
  }
}

//左上角的给返回按键
class backHend extends StatelessWidget {
  const backHend({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
        child:
            // Image.network("", fit: BoxFit.cover) ,
            const Icon(Icons.arrow_back_ios_new_rounded,
                size: 30, color: Colors.black));
  }
}

  // child: Stack(
  //                     children: [
  //                       Column(
  //                         children: [
  //                           Container(
  //                             width: mediaWidth - 20,
  //                             height: 60,
  //                             //颜色
  //                             // decoration: BoxDecoration(color: Colors.red),
  //                             child: const Row(
  //                               mainAxisAlignment:
  //                                   MainAxisAlignment.spaceBetween,
  //                               children: [
  //                                 Padding(
  //                                   padding: EdgeInsets.fromLTRB(30, 0, 0, 0),
  //                                   child: backHend(),
  //                                 ),
  //                                 Padding(
  //                                   padding: EdgeInsets.fromLTRB(0, 0, 30, 0),
  //                                   child: PublishButton(),
  //                                 ),
  //                               ],
  //                             ),
  //                           ),
  //                           Container(
  //                             width: mediaWidth - 20,
  //                             height: 180,
  //                             //颜色
  //                             // decoration: BoxDecoration(color: Color(0xFFF44336)),
  //                             child: Column(
  //                               children: [
                                  
  //                                 Container(
  //                                   alignment: AlignmentDirectional.center,
  //                                   width: mediaWidth - 20,
  //                                   height: 40,
  //                                   // decoration:
  //                                   //     BoxDecoration(color: Color(0xFFF44336)),
  //                                   padding: EdgeInsets.fromLTRB(20, 0, 20, 0),
  //                                   child: const Text(
  //                                     '寻找热爱岭南文化的志愿者',
  //                                     style: TextStyle(
  //                                         fontSize: 27, fontFamily: 'KaiTi'),
  //                                   ),
  //                                 ),
  //                                 Container(
  //                                   width: mediaWidth - 20,
  //                                   height: 120,
  //                                   // decoration:
  //                                   //     BoxDecoration(color: Colors.yellow),
  //                                   child: ListView(
  //                                       padding:
  //                                           EdgeInsets.fromLTRB(50, 10, 50, 0),
  //                                       children: const [
  //                                         Text(
  //                                           '寻找伙伴一起去参加儿童节期间的志愿活动，到岭南金融的博物馆做志愿者，寻找伙伴一起去参加儿童节期间的志愿活动，到岭南金融的博物馆做志愿者寻找伙伴一起去参加儿童节期间的志愿活动，到岭南金融的博物馆做志愿者寻找伙伴一起去参加儿童节期间的志愿活动，到岭南金融的博物馆做志愿者寻找伙伴一起去参加儿童节期间的志愿活动，到岭南金融的博物馆做志愿者志愿者负责讲解文物讲述文物历史来源，管理现场干秩序',
  //                                           style: TextStyle(
  //                                               fontSize: 15,
  //                                               fontFamily: 'KaiTi'),
  //                                         ),
  //                                       ]),
  //                                 ),
  //                                 Container(
  //                                   alignment: AlignmentDirectional.bottomEnd,
  //                                   height: 16,
  //                                   width: mediaWidth - 20,
  //                                   // decoration:
  //                                   //     const BoxDecoration(color: Colors.black),
  //                                   child: const Text("59/10000"),
  //                                 )
  //                               ],
  //                             ),
  //                           ),
  //                           Container(
  //                             width: mediaWidth - 20,
  //                             height: 220,
  //                             padding: EdgeInsets.fromLTRB(20, 5, 20, 0),
  //                             //颜色
  //                             // decoration: BoxDecoration(color: Colors.orange),
  //                             child: Wrap(
  //                               alignment: WrapAlignment.spaceBetween,
  //                               spacing: 5, //水平间距   *
  //                               runSpacing: 10, //垂直间距 *
  //                               // direction:Axis.vertical,  *
  //                               children: [
  //                                 ClipRRect(
  //                                   borderRadius: BorderRadius.circular(10),
  //                                   child: Image.network(
  //                                     "https://www.itying.com/images/flutter/3.png",
  //                                     fit: BoxFit.cover,
  //                                     width: 110,
  //                                     height: 90,
  //                                   ),
  //                                 ),
  //                                 ClipRRect(
  //                                   borderRadius: BorderRadius.circular(10),
  //                                   child: Image.network(
  //                                     "https://www.itying.com/images/flutter/3.png",
  //                                     fit: BoxFit.cover,
  //                                     width: 110,
  //                                     height: 90,
  //                                   ),
  //                                 ),
  //                                 ClipRRect(
  //                                   borderRadius: BorderRadius.circular(10),
  //                                   child: Image.network(
  //                                     "https://www.itying.com/images/flutter/3.png",
  //                                     fit: BoxFit.cover,
  //                                     width: 110,
  //                                     height: 90,
  //                                   ),
  //                                 ),
  //                                 ClipRRect(
  //                                   borderRadius: BorderRadius.circular(10),
  //                                   child: Image.network(
  //                                     "https://www.itying.com/images/flutter/3.png",
  //                                     fit: BoxFit.cover,
  //                                     width: 110,
  //                                     height: 90,
  //                                   ),
  //                                 ),
  //                               ],
  //                             ),
  //                           ),
  //                           Container(
  //                             width: mediaWidth - 20,
  //                             height: 38,
  //                             padding: EdgeInsets.fromLTRB(20, 5, 20, 0),
  //                             //颜色
  //                             // decoration: BoxDecoration(color: Colors.red),
  //                             child: const Row(
  //                               mainAxisAlignment:
  //                                   MainAxisAlignment.spaceBetween,
  //                               children: [
  //                                 Row(
  //                                   children: [
  //                                     Text("#岭南文化  ",
  //                                         style: TextStyle(
  //                                           color: Colors.purple,
  //                                           fontSize: 15,
  //                                         )),
  //                                     Text(
  //                                       "#志愿者  ",
  //                                       style: TextStyle(
  //                                           color: Colors.purple, fontSize: 15),
  //                                     ),
  //                                     Text(
  //                                       "#文化爱好者  ",
  //                                       style: TextStyle(
  //                                           color: Colors.purple, fontSize: 15),
  //                                     )
  //                                   ],
  //                                 )
  //                               ],
  //                             ),
  //                           ),
  //                           Container(
  //                             width: mediaWidth - 20,
  //                             height: 120,
  //                             //颜色
  //                             // decoration: BoxDecoration(color: Colors.pink),
  //                             padding: EdgeInsets.fromLTRB(50, 0, 20, 0),
  //                             child: Column(
  //                               mainAxisAlignment: MainAxisAlignment
  //                                   .spaceBetween, // 指定元素在主轴上的对齐方式
  //                               children: <Widget>[
  //                                 const Row(
  //                                   children: <Widget>[
  //                                     Icon(Icons.emoji_people,
  //                                         size:
  //                                             10), // reduce the size of the Icon
  //                                     Text("心情",
  //                                         style: TextStyle(
  //                                             fontSize:
  //                                                 10)), // reduce the font size of the Text
  //                                   ],
  //                                 ),
  //                                 Row(
  //                                   children: <Widget>[
  //                                     Icon(Icons.emoji_people,
  //                                         size:
  //                                             10), // reduce the size of the Icon
  //                                     Text("性别：不限",
  //                                         style: TextStyle(
  //                                             fontSize:
  //                                                 10)), // reduce the font size of the Text
  //                                   ],
  //                                 ),
  //                                 Row(
  //                                   children: <Widget>[
  //                                     Icon(Icons.emoji_people,
  //                                         size:
  //                                             10), // reduce the size of the Icon
  //                                     Text("搭子人数：13/20",
  //                                         style: TextStyle(
  //                                             fontSize:
  //                                                 10)), // reduce the font size of the Text
  //                                   ],
  //                                 ),
  //                                 Row(
  //                                   children: <Widget>[
  //                                     Icon(Icons.emoji_people,
  //                                         size:
  //                                             10), // reduce the size of the Icon
  //                                     Text("截至日期：5.29",
  //                                         style: TextStyle(
  //                                             fontSize:
  //                                                 10)), // reduce the font size of the Text
  //                                   ],
  //                                 ),
  //                                 Row(
  //                                   children: <Widget>[
  //                                     Icon(Icons.emoji_people,
  //                                         size:
  //                                             10), // reduce the size of the Icon
  //                                     Text("活动地址：岭南金融博物馆",
  //                                         style: TextStyle(
  //                                             fontSize:
  //                                                 10)), // reduce the font size of the Text
  //                                   ],
  //                                 ),
  //                                 Row(
  //                                   children: <Widget>[
  //                                     Icon(Icons.emoji_people,
  //                                         size:
  //                                             10), // reduce the size of the Icon
  //                                     Text("所有人",
  //                                         style: TextStyle(
  //                                             fontSize:
  //                                                 10)), // reduce the font size of the Text
  //                                   ],
  //                                 ),
                                 
  //                               ].toList(),
  //                             ),
  //                           ),
  //                         ],
  //                       ),
  //                     ],
  //                   ),